<template>
  <div class="film">
     <van-popup v-model="popupFlag" class="popup">
      <div>无法获取当前城市定位，请手动选择所在城市</div>
      <button @click="popupFlag=false">取消</button>
      <button @click="goCity">确定</button>
    </van-popup>
    <div class="film-top" @scroll="scrollEvent">
      <header>
        <van-sticky class="sticky-title" :offset-top="0">
          <div class="top-bar" :class="{ topStyle: topStickyFlag }">
            <span class="city iconfont icon-xjt fz12" @click="goCity">{{
              cityInfo.name
            }}</span>
            <span class="title fz18" :class="{ display: !topStickyFlag }"
              >电影</span
            >
          </div>
        </van-sticky>
        <swiper :options="swiperOptions">
          <swiper-slide
            v-for="item in carouselList"
            :key="item"
            class="swiper-height"
          >
            <img :src="item" alt="" />
          </swiper-slide>
          <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
      </header>
      <section class="film-content">
        <van-sticky :offset-top="65">
          <div class="category spaceAround">
            <div @click="getFilmList(1)" :class="{ current: filmType == 1 }">
              正在热映
            </div>
            <div @click="getFilmList(2)" :class="{ current: filmType == 2 }">
              即将上映
            </div>
          </div>
        </van-sticky>

        <div class="loading" v-if="isLoading">加载中...</div>
        <component
          :is="componentId"
          :film-list="filmList"
          :city-info="cityInfo"
          v-else
        ></component>
      </section>
    </div>
    <footer>
      <bottom-bar></bottom-bar>
    </footer>
  </div>
</template>

<script>
import BottomBar from "../../components/BottomBar/BottomBar.vue";
import FilmNow from "../../components/Film/FilmNow.vue";
import FilmComing from "../../components/Film/FilmComing.vue";

export default {
  name: "film",
  computed: {
    cityInfo() {
      if (JSON.parse(localStorage.getItem("cityInfo")) == null) {
        localStorage.setItem(
          "cityInfo",
          JSON.stringify(this.$store.state.locationCity)
        );
        return this.$store.state.locationCity;
      }
      //刷新时读取上一次的cityId
      return JSON.parse(localStorage.getItem("cityInfo"));
    },
  },
  data() {
    return {
      popupFlag:false,
      // 顶部滚动事件的
      topStickyFlag: false,
      isLoading: false,
      // type 1:正在热映  2：即将上映
      filmType: 1,
      // 请求的页数
      pageNum: 1,
      componentId: "film-now",
      filmList: [],
      carouselList: [
        require("../../assets/images/Carousel-pic1.jpg"),
        require("../../assets/images/Carousel-pic2.jpg"),
        require("../../assets/images/Carousel-pic3.jpg"),
        require("../../assets/images/Carousel-pic4.jpg"),
        require("../../assets/images/Carousel-pic5.jpg"),
      ],
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
        },
        observer: true, //修改swiper自己或子元素时，自动初始化swiper
        observeParents: true, //修改swiper的父元素时，自动初始化swiper
        loop: true,
        autoplay: {
          delay: 3000,
        },
      },
    };
  },
  components: {
    "bottom-bar": BottomBar,
    "film-now": FilmNow,
    "film-coming": FilmComing,
  },
  created() {
    this.isLoading = true;
    let that = this;
    this.axios
      .get(process.env.VUE_APP_BASE_URL, {
        headers: {
          "X-Host": "mall.film-ticket.film.list",
        },
        params: {
          cityId: that.cityInfo.cityId,
          pageNum: that.pageNum,
          pageSize: 10,
          type: 1,
          k: 5562640,
        },
      })
      .then((res) => {
        that.isLoading = false;
        that.filmList = res.data.data.films;
      })
      .catch((error) => {
        console.log(error);
      });
  },
  mounted(){
    // 判断是否为第一次定位
    if(JSON.parse(localStorage.getItem("cityInfo")).first == 0){
      this.$toast.loading({
       message: "定位中...",
       forbidClick: true,
     });
     setTimeout(()=>{
       this.popupFlag=true;
     },2000)
    }
  },

  methods: {
    scrollEvent(e) {
      let top = e.target.scrollTop;
      if (top > 160) {
        this.topStickyFlag = true;
      } else {
        this.topStickyFlag = false;
      }
    },
    // 跳转城市定位页面
    goCity() {
      this.$router.push({
        name: "city",
      });
    },

    getFilmList(type) {
      this.isLoading = true;
      this.filmType = type;
      let that = this;
      //通过type进行判断组件
      if (type === 1) {
        this.componentId = "film-now";
      } else if (type === 2) {
        this.componentId = "film-coming";
      }

      this.axios
        .get(process.env.VUE_APP_BASE_URL, {
          headers: {
            "X-Host": "mall.film-ticket.film.list",
          },
          params: {
            cityId: that.cityInfo.cityId,
            pageNum: 1,
            pageSize: 10,
            type: this.filmType,
            k: 5562640,
          },
        })
        .then((res) => {
          this.filmList = res.data.data.films;
          this.isLoading = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
  },
};
</script>

<style scoped lang="scss">
.popup{
  width: 80%;
  padding: 10%;
  text-align: center;
  button{
    margin-top: 20px;
    width: 50%;
    border: none;
    border-radius: 5px;
    // background-color: skyblue;
  }
  button:nth-child(3){
    color:#ff5f16 ;
  }
}
.topStyle {
  background-color: #fff;
  padding: 15px 10px;
  border-bottom: 1px solid rgb(230, 230, 230);
}
.display {
  display: none;
}
.current {
  color: #ff5f16;
  border-bottom: 2px solid #ff5f16;
}
.film {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  .film-top {
    overflow: auto;
    header {
      position: relative;
      height: 167px;
      flex-shrink: 0;
      .sticky-title {
        position: absolute;
        top: 0;
        .top-bar {
          padding: 10px;
          .city {
            position: relative;
            z-index: 9;
            height: 44px;
            line-height: 44px;
            background-color: rgba(0, 0, 0, 0.2);
            padding: 5px;
            border-radius: 10px;
          }
          .title {
            padding-left: 30%;
          }
        }
      }
      .swiper-height {
        height: 168px;
      }
    }
    .film-content {
      padding: 10px;
      flex-grow: 1;
      .category {
        background-color: #fff;
        height: 49px;
        line-height: 49px;
      }
    }
  }
  .loading {
    text-align: center;
  }
  footer {
    flex-shrink: 0;
  }
}
</style>